<template>
  <!-- lcd页面 -->
  <div style="
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding: 10px;
      position: relative;
    ">
    <div class="header">
      <div style="display: inline-block">
        <!-- <img
          src="@/assets/common/YaduLoGo2.svg"
          style="width: 20vh; margin-top: -40px"
          alt=""
        > -->
        <img src="@/assets/common/logo.png" style="width: 10vw;" alt="">
        <span style="
            color: black;
            font-size: 5vh;
            position: fixed;
            left: 17%;
            padding-left: 10px;
          ">{{ select }}</span>
      </div>
      <!-- <el-select
        slot="prepend"
        v-model="select"
        placeholder="请选择"
        style="float: right; width: 30vw"
        @change="changeClick"
      >
        <el-option
          v-for="item in lcdNameList"
          :key="item"
          :value="item"
          :label="item"
        />
      </el-select> -->
      <span style="color: black; float: right; margin-right: 5vw; font-size: 5vh">
        {{ now }}
      </span>
    </div>

    <div class="content">
      <div v-if="!lcdMsgList.length" class="lcdtips" style="color: balck; font-size: 10vh">
        请在右上角选择数据
      </div>
      <table v-else class="table4_1" style="width: 80vw; font-size: 7vh; margin: 5vw">
        <!-- <caption style="background-color: #92a9ed; border: 1px solid #92a9ed">
          表格标题
        </caption> -->
        <tr v-for="item in lcdMsgList" :key="item.key">
          <td style="color: black; text-align: center">
            {{ item.key + "：" }}
          </td>
          <td style="
              text-align: left;
              color: red;
              text-align: left;
              padding-left: min(2vw, 60px);
            ">
            {{ item.value }}
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { getLcdListApi, getLcdDataApi } from "@/api/lcd";
import dateUtil from "@/utils/date";
export default {
  name: "DisplayScreen",
  data() {
    return {
      select: "",
      lcdNameList: [],
      lcdMsgList: [],
      time: null,
      now: "",
    };
  },
  async created() {
    console.log(this.$route, "router");
    // this.$route.query.l = this.$route.query.lcdName
    const res = await getLcdDataApi(this.$route.query.l);
    // const res = await getLcdDataApi(this.$route.params.lcdName)
    console.log(res);
    this.lcdMsgList = res.data.lcdMsgList;
    this.select = res.data.lcdMsgList[0].value;
  },
  mounted() {
    this.getList();
    this.time = setInterval(async () => {
      if (this.select) {
        const res = await getLcdDataApi(this.select);
        this.lcdMsgList = res.data.lcdMsgList;
      }
      this.now = dateUtil.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss");
    }, 1000);
  },
  beforeDestroy() {
    if (this.time !== null) {
      clearInterval(this.time);
    }
  },

  methods: {
    async getList() {
      const res = await getLcdListApi();
      this.lcdNameList = res.data.lcdNameList;
      const querySelet = this.$route.query.select;
      if (querySelet && this.lcdNameList.includes(querySelet)) {
        this.select = querySelet;
      }
    },

    async changeClick(value) {
      const res = await getLcdDataApi(value);
      this.lcdMsgList = res.data.lcdMsgList;
      this.$router.push(`/lcd?l=${value}`);
      // this.$router.push(`/lcd/${value}`)
    },
  },
};
</script>

<style scoped>
.content {
  width: 90vw;
  /* height: 90vh; */
  /* background-color: #fff; */
  /* position: relative;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%); */
  margin-top: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lcdtips {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* .table4_1 {
  margin-top:10vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top:50% ;
  margin-left:50% ;
} */

.table4_1 table {
  width: 100%;
  border: 10;
}
.table4_1 th {
  background-color: #4169e1;
  color: #ffffff;
}
.table4_1,
.table4_1 th,
.table4_1 td {
  font-size: 0.95em;
  text-align: center;
  padding: 4px;
  border-collapse: collapse;
}
.table4_1 th,
.table4_1 td {
  border: 1px solid #92a9ed;
  border-width: 1px 0 1px 0;
}
.table4_1 tr {
  border: 1px solid #92a9ed;
}
.table4_1 tr:nth-child(odd) {
  background-color: #bfcdf5;
}
.table4_1 tr:nth-child(even) {
  background-color: #fdfdfd;
}
</style>
